<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<html xmlns:v>
	<%
		String path = request.getContextPath();
		String basePath = request.getScheme() + "://"
				+ request.getServerName() + ":" + request.getServerPort()
				+ path + "/";
	%>
	<head id="Head1">

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<title>设计流程图</title>

		<link rel="stylesheet" type="text/css" href="../jslib/jquery-easyui-1.4.1/themes/default/easyui.css">
		<link href="css/flowPath.css" type="text/css" rel="stylesheet" />

		<STYLE>
v\: * {
	behavior: url(#default#VML);
}
</STYLE>

		<script type="text/javascript">
		 var common_contextPath = '<%=basePath%>';
	</script>

	</head>
	<base target="_self" />
	<body class="easyui-layout bodySelectNone" id="body"
		onselectstart="return false" onload="showMenu()">

    <div id="title" region="north" split="true" border="false" title="工具栏" class="titleToolview">
    	<div>
    	<img alt="后退"	title="后退" src="images/back.png"  onclick="higherLevel();" class="buttonStyle"/>
    	</div>
		<div>
			<table>
				<tr>
					<td><img src='images/green.png' width=24 height=24></td><td>使用&nbsp;</td>
					<td><img src='images/blue.png' width=24 height=24></td><td>空闲&nbsp;</td>
					<td><img src='images/black.png' width=24 height=24></td><td>报废&nbsp;</td>
					<td><img src='images/red.png' width=24 height=24></td><td>故障&nbsp;</td>
					<td><img src='images/yellow.png' width=24 height=24></td><td>维修&nbsp;</td>
					<td><img src='images/grey.png' width=24 height=24></td><td>送检&nbsp;</td>
				</tr>
			</table>
		</div>
	</div>
		<div id="leftContent" region="west" split="true" title=""
			class="leftContent" style="width: 190px; height: 650px; float: left">
			<div class="easyui-accordion overflowHidden" fit="true"
				border="false">
				<div title="树型结构"
					style="overflow: hidden; background-color: #c7dbfc;">
					<div style="background: #FFFFFF; border: #aaaaaa solid 1px; height: 650px; width: 50px; float: left">
						<!-- 
						<div style="background-image: url(../user/img/titlie.gif); background-repeat: repeat-x; height: 20px; width: 190px; padding-top: 5px;">
							<span style="margin-left: 140px;"> <img onclick="return false;" src="../user/img/delete.gif" alt="展开" title="点击展开所有节点" id="expandAllBtn" /> </span>
							<span> <img onclick="return false;" src="../user/img/add.png" alt="闭合" title="点击关闭所有节点" id="collapseAllBtn" /> </span>
						</div>
						 -->
						<div
							style="WIDTH: 265px; HEIGHT: 480px; OVERFLOW: auto; scrollbar-3dlight-color: #595959; scrollbar-arrow-color: #FFFFFF; scrollbar-base-color: #CFCFCF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-face-color: #CFCFCF; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #595959">
							<div id="treeList" class="dtree">
								<ul id="treeDemo" class="ztree"
									style="width: 230px; overflow: auto;"></ul>

							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
		<div region="center" style="float: right;" title="可视化图片" id="contextBody" class="mapContext">
			<div width="50%" height="100%">
				<img id="targetimg" src="<%=basePath%>/visual/picfile/${visualEntity.picaddress }" usemap="#visualmap" border="0px;">
			</div>
			<map name="visualmap" id="visualmap">
				<!-- <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />  -->
			</map>
			<!-- Line右键菜单 -->
			<div id="lineRightMenu" class="modeRight">
				<div class="modeRightTop"></div>
				<div class="modeRightDel"
					onmousemove="this.style.backgroundColor='#c5e7f6'"
					onclick="graphUtils.removeNode();"
					onmouseout="this.style.backgroundColor=''">
					<span class="menuSpan">删 除</span>
				</div>
				<div class="modeRightPro"
					onmousemove="this.style.backgroundColor='#c5e7f6'"
					onclick="graphUtils.showLinePro();"
					onmouseout="this.style.backgroundColor=''">
					<span class="menuSpan">属 性</span>
				</div>
				<div class="modeRightButtom"></div>
			</div>

			<!-- Mode右键菜单 -->
			<div id="rightMenu" class="modeRight">
				<div class="modeRightTop"></div>
				<div class="modeRightCopy"
					onmousemove="this.style.backgroundColor='#c5e7f6'"
					onclick="graphUtils.copyNode();"
					onmouseout="this.style.backgroundColor=''">
					<span class="menuSpan">复 制</span>
				</div>
				<div class="modeRightDel"
					onmousemove="this.style.backgroundColor='#c5e7f6'"
					onclick="graphUtils.removeNode();"
					onmouseout="this.style.backgroundColor=''">
					<span class="menuSpan">删 除</span>
				</div>
				<div class="modeRightPro"
					onmousemove="this.style.backgroundColor='#c5e7f6'"
					onclick="graphUtils.showModePro();"
					onmouseout="this.style.backgroundColor=''">
					<span class="menuSpan">属 性</span>
				</div>
				<div class="modeRightButtom"></div>
			</div>

			<!-- PathBody右键菜单 -->
			<div id="pathBodyRightMenu" class="modeRight">
				<!--<div class="modeRightTop"></div>
				<div class="modeRightPixel" id="isPixel"
					onclick="higherLevel()"
					onmousemove="this.style.backgroundColor='#c5e7f6'"
					onmouseout="this.style.backgroundColor=''">
					<span class="menuSpan">后退</span>
				</div>
				 
				<div class="modeRightPixel" id="isPixel"
					onclick="global.baseTool.changStyle(this);"
					onmousemove="this.style.backgroundColor='#c5e7f6'"
					onmouseout="this.style.backgroundColor=''">
					<span class="menuSpan">Pixel</span>
				</div>
				<div class="modeRightLeft" onclick="graphUtils.alignLeft();"
					onmousemove="this.style.backgroundColor='#c5e7f6'"
					onmouseout="this.style.backgroundColor=''">
					<span class="menuSpan">左对齐</span>
				</div>
				<div class="modeRightCenter" onclick="graphUtils.verticalCenter();"
					onmousemove="this.style.backgroundColor='#c5e7f6'"
					onmouseout="this.style.backgroundColor=''">
					<span class="menuSpan">垂直居中</span>
				</div>
				<div class="modeRightRight" onclick="graphUtils.alignRight();"
					onmousemove="this.style.backgroundColor='#c5e7f6'"
					onmouseout="this.style.backgroundColor=''">
					<span class="menuSpan">右对齐</span>
				</div>
				<div class="modeRightHead" onclick="graphUtils.alignTop();"
					onmousemove="this.style.backgroundColor='#c5e7f6'"
					onmouseout="this.style.backgroundColor=''">
					<span class="menuSpan">顶部对齐</span>
				</div>
				<div class="modeRightMiddle"
					onclick="graphUtils.horizontalCenter();"
					onmousemove="this.style.backgroundColor='#c5e7f6'"
					onmouseout="this.style.backgroundColor=''">
					<span class="menuSpan">水平居中</span>
				</div>
				<div class="modeRightFoot" onclick="graphUtils.bottomAlignment();"
					onmousemove="this.style.backgroundColor='#c5e7f6'"
					onmouseout="this.style.backgroundColor=''">
					<span class="menuSpan">底端对齐</span>
				</div>
				 -->
				<div class="modeRightButtom"></div>
			</div>

			<div id="topCross"></div>
			<div id="leftCross"></div>

		</div>



		<div title="辅助区" class="auxiliaryArea" style='display: none;'>
			<!-- 小地图 -->
			<div id="smallMap"></div>

			<div id="mainControl">

				<div id="tab" class="control">

					<h3 id="h1" class="hclass" onClick="hOnMouseOver(this, '1')">
						&nbsp;
						<img src="images/img1.png" style="vertical-align: middle;" />
						&nbsp;&nbsp;热点名称
					</h3>
					<div id="tab1" class="htabup">

						<table cellpadding="0" cellspacing="0">
							<tr>
								<td style="text-align: center; height: 25px;">
									热点ID
								</td>
								<td>
									<input type="text" id="inputId" class="inputComm"
										style="width: 300px;" />
								</td>
							</tr>
							<tr>
								<td style="text-align: center; height: 25px;">
									热点名称
								</td>
								<td>
									<input type="text" id="inputTitle" class="inputComm"
										style="width: 300px;" />
								</td>
							</tr>
							<tr>
								<td style="width: 70px; text-align: center;">
									内容
								</td>
								<td>
									<textarea rows="2" id="modeContent" class="contextArea"></textarea>
								</td>
							</tr>

						</table>

					</div>

					<h3 id="h2" class="hclass" onClick="hOnMouseOver(this, '2')">
						&nbsp;
						<img src="images/img2.png" style="vertical-align: middle;" />
						&nbsp;&nbsp;热点属性
					</h3>
					<div id="tab2" class="htab">
						<table cellpadding="0" cellspacing="0">
							<tr>
								<td style="width: 70px; height: 25px; text-align: center;">
									宽
								</td>
								<td>
									<input type="text" id="inputWidth" class="inputComm"
										style="width: 130px;" />
								</td>
								<td style="width: 70px; text-align: center;">
									高
								</td>
								<td>
									<input type="text" id="inputHeight" class="inputComm"
										style="width: 130px;" />
								</td>

							</tr>
							<tr>
								<td style="text-align: center;">
									上边距
								</td>
								<td>
									<input type="text" id="inputTop" class="inputComm"
										style="width: 130px;" />
								</td>
								<td style="text-align: center;">
									左边距
								</td>
								<td>
									<input type="text" id="inputLeft" class="inputComm"
										style="width: 130px;" />
								</td>
							</tr>

							<tr style="display: none;">
								<td style="width: 70px; text-align: center;">
									背景图
								</td>

								<td colspan="3">
									<input type="text" id="inputImgSrc" class="inputComm"
										style="width: 367px;" />
								</td>
							</tr>
						</table>
					</div>
					<h3 id="h3" class="hclass" onClick="hOnMouseOver(this, '3')">
						&nbsp;
						<img src="images/img3.png" style="vertical-align: middle;" />
						&nbsp;&nbsp;关联项
					</h3>
					<div id="tab3" class="htab">

						<table cellpadding="0" cellspacing="0">
							<tr>
								<td style="width: 70px; text-align: center;">
									子设计图
								</td>
								<td colspan="3">
									<input type="text" id="inputChildflow" class="inputComm"
										style="width: 367px;" />
									<a href="#" onclick="openChild('inputChildflow')">浏览</a>
								</td>
							</tr>

						</table>

					</div>

				</div>

			</div>
			<div id="show" class="show">

				<div id="nullCount" class="showItem"></div>
				<div id="lineCount" class="showItem"></div>
				<div id="modeCount" class="showItem"></div>
				<div id="contextCount" class="showItem"></div>

			</div>

		</div>

		<!-- 移动时的图象 -->
		<div id="moveBaseMode" class="moveBaseMode">
			<img id="moveBaseModeImg" src="images/Favourite.png"
				class="nodeStyle" />
		</div>

		<div id="prop" style="visibility: hidden;">
			Dialog Content.
		</div>

		<SPAN id="wenzi1"
			style="DISPLAY: none; Z-INDEX: 2000; POSITION: absolute"> <!--插入文字可视化-->
			<TEXTAREA id=txt1
				style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; WIDTH: 300px; BORDER-BOTTOM: black 1px solid; HEIGHT: 100px"></TEXTAREA>
			<BR>
			<CENTER>
				字体:
				<SELECT id=wenziziti style="WIDTH: 100px"
					onchange=gengxinwenzi.click()>
					<OPTION selected>
						宋体
					<OPTION>
						黑体
					<OPTION>
						隶书
					<OPTION>
						幼圆
					<OPTION>
						楷体_GB2312
					<OPTION>
						仿宋_GB2312
					<OPTION>
						华文中宋
					<OPTION>
						华文行楷
					<OPTION>
						华文新魏
					<OPTION>
						华文细黑
					<OPTION>
						华文彩云
					<OPTION>
						方正姚体
					<OPTION>
						方正舒体
					<OPTION>
						Wingdings
					<OPTION>
						Wingdings 2
					<OPTION>
						Wingdings 3
					<OPTION>
						Webdings
					<OPTION>
						System
					<OPTION>
						@宋体
					<OPTION>
						@黑体
					<OPTION>
						@隶书
					<OPTION>
						@幼圆
					<OPTION>
						@楷体_GB2312
					<OPTION>
						@仿宋_GB2312
					<OPTION>
						@华文中宋
					<OPTION>
						@华文行楷
					<OPTION>
						@华文新魏
					<OPTION>
						@华文细黑
					<OPTION>
						@华文彩云
					<OPTION>
						@方正姚体
					<OPTION>
						@方正舒体
					<OPTION>
						@System
					</OPTION>
				</SELECT>
				<BR>
				颜色：
				<INPUT onchange=gengxinwenzi.click() id=wenziyanse
					style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; WIDTH: 50px; BORDER-BOTTOM: black 1px solid; HEIGHT: 17px"
					value=#000000>
				背景：
				<INPUT onchange="gengxinwenzi.click()" id=wenzibeijing
					style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; WIDTH: 50px; ORDER-BOTTOM: black 1px solid; HEIGHT: 17px"
					value=#FFFFFF>
				大小：
				<SELECT id=wenzidaxiao style="WIDTH: 50px"
					onchange=gengxinwenzi.click()>
					<OPTION selected>
						12
						<SCRIPT>      for (i = 1; i < 101; i++) document.write("<option>" + i)</SCRIPT>
					</OPTION>
				</SELECT>
				<BR>
				<INPUT class=bon2 id=gengxinwenzi onclick="gengxintxt() "
					type="button" value="浏览更新" style="display: none;">
				<INPUT class=bon2 onclick=charuwenzi() type=button value=插入>
				<INPUT class=bon2 onclick="wenzi1.style.display='none'" type=button
					value=取消>
				<INPUT class=bon2 onclick="dellabel()" type=button value=删除>
		</SPAN>

		<script src="js/jquery-1.6.min.js" type="text/javascript"></script>
		<script src="js/jquery.easyui.min.js" type="text/javascript"></script>
		<script src="js/strawberryview.min.js" type="text/javascript"
			language="javascript"></script>
		<link rel="stylesheet"
			href="<%=request.getContextPath()%>/ztree/css/zTreeStyle/zTreeStyle.css"
			type="text/css" />
		<script type="text/javascript"
			src="<%=request.getContextPath()%>/ztree/jquery.ztree.core-3.4.js"></script>
		<script>

	    var mainControl = $id("mainControl");
	    mainControl.style.width = (document.body.offsetWidth - 412) + "px";

	    var bgImg = "url(images/bg.gif)";
	    var backColor = "#e0ecff";
	    function hOnMouseOver(tagObj, index) {
	        var h1 = $id("h1");
	        var h2 = $id("h2");
	        var h3 = $id("h3");

	        var tab1 = $id("tab1");
	        var tab2 = $id("tab2");
	        var tab3 = $id("tab3");

	        var setHClass = function(obj, colorValue, indexValue) {

	            obj.style.background = colorValue;
	            obj.style.zIndex = indexValue;

	        }

	        var setTagClass = function(obj, className) {

	            obj.setAttribute("class", className);
	            obj.setAttribute("className", className);

	        }

	        setHClass(h1, bgImg, "1");
	        setHClass(h2, bgImg, "1");
	        setHClass(h3, bgImg, "1");

	        setTagClass(tab1, "htab");
	        setTagClass(tab2, "htab");
	        setTagClass(tab3, "htab");

	        setHClass(tagObj, backColor, "3");
	        setTagClass($id("tab" + index), "htabup");

	    }

	    jQuery(document).ready(function() {

	        $id("h1").style.background = "#e0ecff";
	        $id("h1").style.zIndex = "3";

	        var global = com.xjwgraph.Global;

	        graphUtils = com.xjwgraph.Utils.create({

	            contextBody: 'contextBody',
	            width: 1600,
	            height: 1000,
	            smallMap: 'smallMap',
	            mainControl: 'mainControl',
	            historyMessage: 'historyMessage',
	            prop: 'prop'

	        });
	        
	        var xmlDoc = new ActiveXObject('MSXML2.DOMDocument');
    		xmlDoc.async = false;
    		
    		xmlDoc.load('<%=basePath%>/visual/data/${visualEntity.filename}');
    		var xmlText = xmlDoc.xml;
	        //var xmlText = '${content}';
	        if (xmlText != '') {
	            graphUtils.loadTextXml(xmlText);
	        }
	        
	        function countModule() {

	            stopEvent = false;

	            var lineCount = global.lineMap.size();
	            var modeCount = global.modeMap.size();
	            var contextCount = global.baseTool.contextMap.size();

	            $id("lineCount").innerHTML = "线总数:" + lineCount;
	            $id("modeCount").innerHTML = "模型数:" + modeCount;
	            $id("contextCount").innerHTML = "区域数:" + contextCount;
	        }
	        countModule();
	        
	        //动态加载图片
	        $(".needimg").each(function(i){
			   var imgtype = $(this).attr("imgtype");
			   var imgid = $(this).attr("imgid");
			   if (imgtype=="equipment"){
			   	   jQuery.ajax({
						type:'get',
						url:common_contextPath+"/visual/visualAction!showVisualPic.action?id="+imgid+"&type=equipment",
						async:true,
						success:function(data){
							$(".needimg:eq("+i+")").attr('src','../task/file/'+data)
				        }
	                });
			   }
			   if (imgtype=="person"){
			   	   jQuery.ajax({
						type:'get',
						url:common_contextPath+"/visual/visualAction!showVisualPic.action?id="+imgid+"&type=person",
						async:true,
						success:function(data){
							$(".needimg:eq("+i+")").attr('src','/cptdm/user/printImage!print.action?path='+data)
				        }
	                });
			   }
			});
			
			//红绿灯显示
		    //Showflesh();
			setInterval("Showflesh()", 1000);
	    });


		function Showflesh(){
			//红绿灯
			$(".needlight").each(function(i){
				var imgid = $(this).attr("imgid");
				jQuery.ajax({
						type:'get',
						url:common_contextPath+"/visual/visualAction!showVisualPic.action?id="+imgid+"&type=light",
						async:true,
						success:function(data){
							$(".needlight:eq("+i+")").attr('src','images/'+data)
				        }
	             });
			});
			
			//仪器人员
			$(".equipmentperson").each(function(i){
				var imgid = $(this).attr("imgid");
				jQuery.ajax({
						type:'get',
						url:common_contextPath+"/visual/visualAction!showEuipmentPersonPic.action?id="+imgid,
						async:true,
						success:function(datas){
						    if (datas!=''){
						    	var datalist = datas.split(',');
						    	$(".equipmentperson:eq("+i+")").attr('src','/cptdm/user/printImage!print.action?path='+datalist[1]);
						    	$(".equipmentperson:eq("+i+")").click(function(){windowopen('visualAction!designviewPerson.action?testId='+datalist[0],'人员信息')});
						    }
				        }
	             });
			});
			
			$(".equipmentdata").each(function(i){
				var imgid = $(this).attr("imgid");
				jQuery.ajax({
						type:'get',
						url:common_contextPath+"/visual/visualAction!getEuipmentData.action?id="+imgid,
						async:true,
						success:function(data){
						    if (data!=''){
						    	$(".equipmentdata:eq("+i+")").text(data);
						    	$(".equipmentdata:eq("+i+")").click(function(){windowopen('wave.jsp','数据信息')});
						    }
				        }
	             });
			});
			
			$(".equipmenttask").each(function(i){
				var imgid = $(this).attr("imgid");
				jQuery.ajax({
						type:'get',
						url:common_contextPath+"/visual/visualAction!getEuipmentTask.action?id="+imgid,
						async:true,
						success:function(datas){
						    if (datas!=''){
						    	var datalist = datas.split(',');
						    	$(".equipmenttask:eq("+i+")").text(datalist[1]);
						    	$(".equipmenttask:eq("+i+")").click(function(){windowopen('waitWork!viewCodeReviewFlowExec.action?id='+datalist[0],'数据信息')});
						    }
				        }
	             });
			});
		}
	    
	    function windowopen(toUrl,toTitle){
	    	window.open(toUrl,toTitle,'height=650,width=1050,top=0,left=0,toolbar=no,menubar=no,scrollbars=yes, resizable=yes,location=no, status=no') 
	    }
	    
	    function windowopen1(toUrl,toTitle){
	    	window.open(toUrl,toTitle,'height=240,width=340,top=0,left=0,toolbar=no,menubar=no,scrollbars=yes, resizable=yes,location=no, status=no') 
	    }
		
		 //====================下拉树菜单==============================
        function showMenu() {
            showOrgTree();
        }
        
        function showOrgTree(){
            treeIsLoad = true;
            var setting = {
                treeId:"orgTree",
                view: {
                    dblClickExpand: false
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                   // beforeClick: beforeClick,
                    onClick: onClick
                }
            };
            var zNodes;
	            $.ajax({  
                   url : common_contextPath+"/visual/visualAction!getPersenTree.action?id=<%=request.getParameter("id")%>",  
                   type : "post", 
                   dataType : "json",  
                   cache : false,  
                   async:false,
                   error : function(textStatus, errorThrown) {  
                       alert("系统ajax交互错误: " + textStatus.value);  
                   },  
                   success : function(data, textStatus) {
                      zNodes = data;
                      $.fn.zTree.init($("#treeDemo"), setting,zNodes);
                      var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
					  treeObj.expandAll(true);
                   } 
               });             
        	}  
        	
        	function onClick(e, treeId, treeNode) {
	            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
	            nodes = zTree.getSelectedNodes();
	            var id = "";
	            nodes.sort(function compare(a,b){return a.id-b.id;});
	            id = nodes[0].id;
	            if(null!=id&&""!=id){
	            	window.location.href=common_contextPath+'/visual/visualAction!viewVisual.action?id='+id;
	            }
	        }
	        
	        function higherLevel(){
	        	var thisTreeObj = $.fn.zTree.getZTreeObj("treeDemo")
	        	var thisNode = thisTreeObj.getNodeByParam("id","<%=request.getParameter("id")%>",null);
	        	if(null!=thisNode.getParentNode()){
	        		window.location.href=common_contextPath+'/visual/visualAction!viewVisual.action?id='+thisNode.getParentNode().id;
	        	}else{
	        		alert("已经是根节点！");
	        	}
	        }
	        //===============================下拉树菜单结束========================
	</script>
</html>
